<template>
	<view>
		<view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">

		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<view style="position: relative;">
				<input type="text"   class="sou" placeholder-class="suo"
					placeholder="搜品牌或搜厂号" v-model="keywords" confirm-type="search" @confirm="search" />
				<image src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220325/91243acc628efa1338d3d38826d22484.png"
					class="souicon" mode=""></image>
			</view>
			<view class="fenlei1">
				<view @click="dianji_fl(index)" style="width: 20%;text-align: center;float: left;margin-bottom: 30rpx;" v-for="(item,index) in pp_list" :key='index'>
					<image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					<view style="font-size: 24rpx;line-height: 30rpx;" :class="fl_type==index?'active':'a'">
						{{item.name}}
					</view>
				</view>
			</view>
			<view style="width:100%;margin: 26rpx auto;display: flex;justify-content:space-between;">
				<view  @click="jiage(1)" :class="tui_type==1?'tui_active':'tui_mei'">
					全部工厂<!-- <text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text> -->
				</view>
				<view v-if="yuan_list_arr.length>0" @click="jiage(2)" :class="tui_type==2?'tui_active':'tui_mei'">
					{{qihuo || '品牌规格'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view v-if="yuan_list_arr1.length>0" @click="jiage(3)" :class="tui_type==3?'tui_active':'tui_mei'">
					{{qihuo1 || '产区'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view v-if="yuan_list_arr2.length>0" @click="jiage(4)" :class="tui_type==4?'tui_active':'tui_mei'">
					{{qihuo2 || '厂号'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
			</view>
			<view style="width: 100%;box-sizing: border-box;padding: 30rpx;background-color: #FFFFFF;border-radius: 20rpx;margin-bottom: 20rpx;" v-for="(item,index) in qhjy_list" :key='index'>
				<view style="overflow: hidden;" @click="cjxq(item.id)" class="flex items-center">
					<view style="width: 18%;overflow: hidden;">
						<image :src="item.avatar" style="width: 92rpx;height: 92rpx;border-radius: 50%;display: block;" mode=""></image>
					</view>
					<view style="width: 82%;padding: 6rpx 0;">
						<view style="line-height: 40rpx;" class="flex items-center flex-wrap">
							<text class="pr20" style="color: #000000;font-size: 30rpx;display: inline-block;font-weight: 600;">{{item.name}}</text>
							<image :src="item.place_info.logo_image" style="width: 32rpx;height: 20rpx;margin-top: 0;margin-left: 0;" mode=""></image>
							<text style="color: #999999;font-size: 20rpx;margin-left: 20rpx;">({{item.place_info.name}})</text>
							<text style="color: #999999;font-size: 24rpx;">{{item.create_time_tips}}</text>
						</view>
						<view style="line-height: 40rpx;color: #010101;font-size: 24rpx;" class="yihang">
							{{item.en_name}}
						</view>
					</view>
				</view>
				<view style="overflow: hidden;margin-top: 30rpx;">
					<view style="width: 82%;float: right;color: #999999;font-size: 24rpx;line-height: 40rpx;">
						<view class="flex items-center flex-wrap break_all">
							产区：{{item.place_array}}
						</view>
						<view class="flex items-center flex-wrap break_all">
							品牌规格：{{item.craft_array}}
						</view>
						<view class="flex items-center flex-wrap break_all">
							厂号：{{item.specification_array}}
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: center;margin-top: 50rpx;">
				<image v-if="qh_kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
				<view v-if="qhjy_list.length==0" style="text-align: center;color: #999999;font-size: 30rpx;line-height: 60rpx;">
					暂无推荐价格
				</view>
				<view v-if="qhjy_list.length>0 && qh_enmpy" style="text-align: center;color: #999999;font-size: 30rpx;line-height: 60rpx;width: 100%;">
					没有更多了
				</view>
			</view>
		</view>
		<!-- 期货交易 -->
		<lb-picker ref="picker" v-model="qihuo" mode="selector" :dataset="{ name: qihuo }" :list="list_arr"
			@confirm="handleConfirm">
		</lb-picker>
		<lb-picker ref="picker1" v-model="qihuo1" mode="selector" :dataset="{ name: qihuo1 }" :list="list_arr1"
			@confirm="handleConfirm1">
		</lb-picker>
		<lb-picker ref="picker2" v-model="qihuo2" mode="selector" :dataset="{ name: qihuo2 }" :list="list_arr2"
			@confirm="handleConfirm2">
		</lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default{
		components: {
			LbPicker
		},
		data(){
			return{
				tui_type:1,
				qihuo:'',
				list_arr:[],
				yuan_list_arr:[],
				qihuo1:'',
				list_arr1:[],
				yuan_list_arr1:[],
				qihuo2:'',
				list_arr2:[],
				yuan_list_arr2:[],
				qh_enmpy:false,
				qh_kk:false,
				qhjy_list:[],
				qhjy_page:1,
				craft_ids:'',
				place_ids:'',
				specification_ids:'',
				manage_category_ids:'',
				brand_id:'',
				pp_list:[],
				is_vip:2,
				fl_type:-1,
				keywords:''
			}
		},
		onLoad(e) {
			this.pp()
			this.qijylist()
			this.jggy()
			this.chanqu()
			this.baozhuang()
			this.userinfo()
		},
		onReachBottom: function() {
			console.log(222222222)
			if (this.qh_enmpy) {
				return
			} else {
				this.qijylist()
			}
		},
		methods:{
			// 厂家性情
			cjxq:function(id){
				uni.navigateTo({
					url:'cjxq?id='+id
				})
			},
			// 品牌规格
			jggy:function(){
				this.yuan_list_arr=[]
				this.list_arr=[]
				this.post('api/futures/craft',{manage_category_ids:this.manage_category_ids},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.yuan_list_arr=res.data
						for(let i=0;i<res.data.length;i++){
							this.list_arr.push(res.data[i].name)
						}
					}
				})
			},
			// 产区
			chanqu:function(){
				this.yuan_list_arr1=[]
				this.list_arr1=[]
				this.post('api/futures/place',{manage_category_ids:this.manage_category_ids},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.yuan_list_arr1=res.data
						for(let i=0;i<res.data.length;i++){
							this.list_arr1.push(res.data[i].name)
						}
					}
				})
			},
			// 产区
			baozhuang:function(){
				this.yuan_list_arr2=[]
				this.list_arr2=[]
				this.post('api/futures/specification',{manage_category_ids:this.manage_category_ids},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.yuan_list_arr2=res.data
						for(let i=0;i<res.data.length;i++){
							this.list_arr2.push(res.data[i].name)
						}
					}
				})
			},
			userinfo:function(){
				this.post('api/client/info','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.is_vip=res.data.is_vip
					}
				})
			},
			// jiage:function(index){
			// 	this.tui_type=index
			// },
			jiage:function(index){
				this.tui_type=index
				if(index==2){
					this.$refs['picker'].show()
				}else if(index==3){
					this.$refs['picker1'].show()
				}else if(index==4){
					this.$refs['picker2'].show()
				}else if(index==1){
					this.craft_ids=''
					this.place_ids=''
					this.specification_ids=''
					this.manage_category_ids=''
					this.qihuo=''
					this.qihuo1=''
					this.qihuo2=''
					this.qh_enmpy=false
					this.qh_kk=false
					this.qhjy_list=[]
					this.qhjy_page=1
					this.qijylist()
				}
			},
			handleConfirm(e) {
				let that=this
				let index=e.index[0] || e.index
				console.log(index,123456)
				this.craft_ids=this.yuan_list_arr[index].id
				this.qhjy_page=1
				this.qhjy_list=[]
				this.qijylist()
			},
			handleConfirm1(e) {
				let that=this
				let index=e.index[0] || e.index
				console.log(index,123456)
				this.place_ids=this.yuan_list_arr1[index].id
				this.qhjy_page=1
				this.qhjy_list=[]
				this.qijylist()
			},
			handleConfirm2(e) {
				let that=this
				let index=e.index[0] || e.index
				console.log(index,123456)
				this.specification_ids=this.yuan_list_arr2[index].id
				this.qhjy_page=1
				this.qhjy_list=[]
				this.qijylist()
			},
			// 期货品牌
			pp:function(){
				this.post('api/futures/manage','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.pp_list=res.data
					}
				})
			},
			//点击期货分类
			dianji_fl:function(index){
				this.fl_type=index
				this.manage_category_ids=this.pp_list[index].id
				this.qhjy_page=1
				this.qh_enmpy=false
				this.qh_kk=false
				this.qhjy_list=[]
				this.jggy()
				this.chanqu()
				this.baozhuang()
				this.qijylist()
			},
			qijylist:function(){
				let data={
					keywords:this.keywords,
					page:this.qhjy_page,
					limit:10,
					craft_ids:this.craft_ids,
					place_ids:this.place_ids,
					specification_ids:this.specification_ids,
					manage_category_ids:this.manage_category_ids,
					is_recommend:''
				}
				this.post('api/futures/brand',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.qhjy_page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.qh_kk = true
								this.qh_enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.qh_enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.qh_enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.qh_enmpy = true
							}
						}

						this.qhjy_page++
						let data = res.data.data
						// 产区：{{item.place_array}}<br/>
						// 主营：{{item.manage_category_array}}<br/>
						// 品牌规格：{{item.craft_array}}<br/>
						// 厂号：{{item.specification_array}}<br/>
						data.forEach((item) => {
							if (item.place_array && item.place_array.length) {
								item.place_array = item.place_array.join(',')
							}
							if (item.manage_category_array && item.manage_category_array.length) {
								item.manage_category_array = item.manage_category_array.join(',')
							}
							if (item.craft_array && item.craft_array.length) {
								item.craft_array = item.craft_array.join(',')
							}
							if (item.specification_array && item.specification_array.length) {
								if (item.specification_array[0].includes('厂号：')) {
									item.specification_array = [item.specification_array[0].replace('厂号：', '')]
								}
								console.log('%c [ item.specification_array ]-313', 'font-size:13px; background:pink; color:#bf2c9f;', item.specification_array)
								item.specification_array = item.specification_array.join(',')
							}
						})
						this.qhjy_list.push(...data)
						console.log(this.qhjy_list,123456789)
					}else{
						this.qh_kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			search:function(){
				this.qh_kk = false
				this.qh_enmpy = false
				this.qhjy_page=1
				this.qhjy_list=[]
				this.qijylist()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8!important;
		font-family: Demibold;
	}
	.sou {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 0 30rpx 0 80rpx;
		background-color: rgba(255,255,255,.3);
	}
	.suo {
		color: #FFFFFF;
		opacity: 1;
		font-size: 26rpx;
	}

	.souicon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 30rpx;
		transform: translateY(-50%);

	}
	.fenlei1{
		width: 100%;
		margin-top: 26rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		overflow: hidden;
		padding: 20rpx 20rpx 0;
		border-radius: 20rpx;
	}
	.tui_mei{
		color: #666666;
		font-size: 28rpx;
		font-weight: 500;
	}
	.tui_active{
		color: #000000;
		font-size: 28rpx;
		font-weight: 600;
	}
	.active{
		color: #1fb0ac;
	}
	.a{
		color: #000000;
	}
</style>
